<template>
  <div>TimeSelect</div>
  <div>
    <el-time-select v-model="value" start="08:30" step="00:15" end="18:30" placeholder="Select time" />
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ tabsthtm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->

  <div class="hr das"></div>

  <div class="demo-time-range">
    <el-time-select
      v-model="startTime"
      :max-time="endTime"
      class="mr-4"
      placeholder="Start time"
      start="08:30"
      step="00:15"
      end="18:30"
    />
    <el-time-select
      v-model="endTime"
      :min-time="startTime"
      placeholder="End time"
      start="08:30"
      step="00:15"
      end="18:30"
    />
  </div>
    <!-- 页面代码 源码 -->
    <dropWrap key="oreo">
    <pre><code class="language-js">{{ timeSelectRange }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>
  <script lang="ts" setup>
import { ref,onMounted,nextTick} from "vue";
import { demoProps } from "@/stores/modules/merakDemo";
import dropWrap from "../dropWrap.vue";
import Prism from "prismjs";
import "../prism.css";

const value = ref("");
const startTime = ref('')
const endTime = ref('')
let tabsthtm = ref<string>(`
     <el-time-select v-model="value" start="08:30" step="00:15" end="18:30" placeholder="Select time" />
     const value = ref("");
    
    `);
let timeSelectRange = ref<string>(`
  <el-time-select
      v-model="startTime"
      :max-time="endTime"
      class="mr-4"
      placeholder="Start time"
      start="08:30"
      step="00:15"
      end="18:30"
    />
    <el-time-select
      v-model="endTime"
      :min-time="startTime"
      placeholder="End time"
      start="08:30"
      step="00:15"
      end="18:30"
    />
    const startTime = ref('')
    const endTime = ref('')
    `);

/* 生命周期 */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
  <style lang="scss" scoped>
</style>